<template>
  <div>
    <Header title='歌手'><i class="el-icon-arrow-left" @click="$global.goPage('/music')"></i></Header>
    <el-tabs v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane label="全部" name="1">
        <Artist :ArtistList="ArtistTopList1"></Artist>
      </el-tab-pane>
      <el-tab-pane label="华语" name="2">
        <Artist :ArtistList="ArtistTopList"></Artist>
      </el-tab-pane>
      <el-tab-pane label="欧美" name="3">
        <Artist :ArtistList="ArtistTopList"></Artist>
      </el-tab-pane>
      <el-tab-pane label="日本" name="4">
        <Artist :ArtistList="ArtistTopList"></Artist>
      </el-tab-pane>
      <el-tab-pane label="韩国" name="5">
        <Artist :ArtistList="ArtistTopList"></Artist>
      </el-tab-pane>
      <el-tab-pane label="其他" name="6">
        <Artist :ArtistList="ArtistTopList"></Artist>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {mapState} from "vuex";
import Header from "../../../components/Header";
import Artist from "./Artist";
export default {
  name: "ArtistIndex",
  data(){
    return{
      activeName:'1',
      ArtistTopList:this.$store.state.music.ArtistTopList
    }
  },
  components: {Artist, Header},
  beforeCreate() {
    this.$store.dispatch('music/ArtistTopList','1')
  },
  computed:{
    ...mapState({
      ArtistTopList1:state=>state.music.ArtistTopList1.slice(0,50),
    }),
  },
    methods: {
      handleClick(tab) {
        this.$store.dispatch('music/ArtistTopList',tab.name)
        this.ArtistTopList=this.$store.state.music.ArtistTopList.slice(0,50)
      }
  }
}
</script>

<style lang="less">

</style>
